<template>
  <!-- v-model是谁的语法糖？ :value='' @input='' -->
  <!-- v-model 的原型< v-model='value'> -->
  <!-- van-popup是Vant提供的弹出层方法 -->
  <!-- 1. ?接收首页点击后 创给的值 true 使用 van-popup方法 让其显示(true显示 false隐藏) -->
  <!-- 需要设置 :value 动态绑定的固定布尔值(用于接收首页传入的true让弹出框显示)
                @input 设置input监听(Vant需求) 当子组件关闭时候 给首页传入false 让首页关闭弹出框  -->
  <van-popup :value='value' @input='handleClose'>
    <van-cell-group v-if="!isReport">
      <!-- ! 绑定不感兴趣点击方法 -->
      <van-cell @click="disLike">不感兴趣</van-cell>
      <van-cell is-link @click="isReport=true">反馈垃圾内容</van-cell>
      <van-cell>拉黑作者</van-cell>
    </van-cell-group>
    <van-cell-group v-else>
      <van-cell icon="arrow-left" @click="isReport=false">返回</van-cell>
      <!-- ？举报功能保存data()常量 循环遍历到模板上 -->
      <van-cell @click="handleReport(item.value)" icon="info-o" v-for="item in reports" :key="item.value">{{item.label}}</van-cell>
    </van-cell-group>
  </van-popup>
</template>
<script>
//! 导入不敢兴趣功能的api
// ? 导入举报按钮的 api
import { dislike, report } from '../api/article'
// ? 导入举报功能的常量(固定值 单独设置在固定值文件 便于修改)
import { reports } from '../utils/constant'
export default {
  name: 'xianshitanchuang',
  // props:['value'],
  // 接收页面传回的 显示隐藏数值 (父组件传回的)
  props: {
    // ~ 给传回来的值 强制设置为布尔类型(按需) 如果类型不对 会报错
    value: {
      typeof: Boolean
    },
    //! 接收首页返回的 文章id
    articleId: {
    }
  },
  data () {
    // 控制举报窗口
    return {
      isReport: false,
      // ? 导入举报功能的常量 储存到data()里
      reports
    }
  },
  methods: {
    // ? 举报功能接口比对 传给服务器举报信息
    async handleReport (type) {
      try {
        const ret = await report(this.articleId, type)
        if (ret.data.target) {
          // ? 举报成功提示用户($toast)是vant提供的轻提示
          this.$toast('举报文章成功')
          // ? 关闭弹窗
          this.$emit('input', false)
          // ? 通知父组件删除文章
          this.$emit('on-success', this.articleId)
        }
      } catch {
        this.$toast('举报文章失败')
      }
    },
    handleClose () {
      // ~ 控制关闭弹窗（只能让父组件去关闭）
      // ~ this.$emit('event-close', false)
      this.$emit('input', false)
    },
    //! 不敢兴趣按钮的接口比对 传给服务器不敢兴趣的文章id
    async disLike () {
      try {
        //! 传给服务器 获取服务器的返回值 如果成功 提示用户操作成功(try) 不成功提示用户(catch)
        const ret = await dislike(this.articleId)
        if (ret.data.target) {
          //! 关闭弹窗
          this.$emit('input', false)
          //! 删除对应的文章数据（通知父组件去删除文章数据）
          this.$emit('on-success', this.articleId)
          //! 提示用户操作成 ($toast)是vant提供的轻提示
          this.$toast('不感兴趣操作成功')
        }
      } catch (error) {
        //! 不成功提示用户 ($toast)是vant提供的轻提示
        this.$toast('不感兴趣操作失败')
      }
    }

  }
}

</script>
<style scoped lang='less'>
.van-popup {
  width: 80%;
  border-radius: 4px;
}
</style>
